<template>
  <div class="user-avatar-container">
    <el-avatar v-bind="$attrs" v-if="avatar" :src="avatar"></el-avatar>
    <el-avatar v-bind="$attrs" v-else>{{
      userInfo.username || "游客"
    }}</el-avatar>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
  name: "UserAvatar",
  components: {},
})
export default class UserAvatar extends Vue {
  @Prop() userInfo!: any;

  get avatar() {
    return this.userInfo?.avatar;
  }
}
</script>

<style lang="scss" scoped>
.user-avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
